<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15.表单布局</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <form action="#" class="form-horizontal">
        <h2 class="text-center">用户信息表</h2>
<!--        输入框  -->
        <div class="form-group">
<!--            label 的目的是为了直接聚焦输入框  -->
            <label for="firstName" class="col-md-2 control-label">名字</label>
            <div class="col-md-8">
                <input type="text" class="form-control" id="firstName" placeholder="请输入名字">
            </div>
        </div>
        <div class="form-group">
            <label for="lastName" class="col-md-2 control-label">姓</label>
            <div class="col-md-8">
                <input type="text" class="form-control" id="lastName" placeholder="请输入姓氏">
            </div>
        </div>

<!--        复选框    -->
        <div class="form-group">
            <label class="col-md-2 control-label">爱好</label>
            <div class="col-md-8">
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby">唱歌
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby">跳舞
                </label>
            </div>
        </div>

<!--        下拉框   -->
        <div class="form-group">
            <label class="col-md-2 control-label">城市</label>
            <div class="col-md-8">
                <select name="city" id="city" class="form-control">
                    <option value="0">请选择城市</option>
                    <option value="1">上海</option>
                    <option value="2">武汉</option>
                </select>
            </div>
        </div>


<!--        多行文本  -->
        <div class="form-group">
            <label for="remark" class="col-md-2 control-label">备注</label>
            <div class="col-md-8">
                <textArea class="form-control" id="remark"></textArea>
            </div>
        </div>


        <div class="form-group text-center">
            <div class=" btn btn-primary">提交</div>
        </div>
    </form>


    <hr>

    <form action="#" class="form-inline">
        <div class="form-group" style="margin-left: 163px">
            <label for="un" class="control-label">姓名</label>
            <input type="text" id="un" class="form-control" placeholder="请输入姓名">
        </div>
        <div class="form-group">
            <label for="pw" class="control-label">密码</label>
            <input type="password" id="pw" class="form-control" placeholder="请输入密码">
        </div>
        <div class="form-group" style="margin-left: 20px">
            <button class="btn btn-warning">提交</button>
        </div>
    </form>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>